<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <script src="__ROOT__/public/static/index/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="__ROOT__/public/static/index/js/jquery.qrcode.min.js" type="text/javascript"></script>
	<title>计分板</title>
	<style type="text/css">
       /* @font-face { 
        font-family: pmzd;     
        src: url('__ROOT__/public/static/index/font/pmzd.TTF');
        }
        @font-face { 
        font-family: hzgb;      
        src: url('__ROOT__/public/static/index/font/hzgb.TTF'); 
        }*/
	    *{padding: 0px;margin:0px;}
	    html,body{height:100%;overflow:hidden;}
        .box-score-board{height: 100%;width: 100%;background-image: url("__ROOT__/public/static/index/image/body.png");background-size: 100% 100%;}
        .content{width: 100%;height: 88%;}
        .footer{width: 100%;height: 12%;}
        .box-left{height: 100%;width: 35%;float: left;}
        .box-center{height: 100%;width: 30%;float: left;}

        .box-right{height: 100%;width: 35%;float: left;}

        .footer p{
        	 text-align: center;
        	 font-size: 32px;
        	 color:#fff;
        	 padding-top: 20px;
        }
        #player2-name,#player1-name{
            font-family:"庞门正道标题体";
        }
        #frame{
            font-family:"汉真广标";
        }
	</style>
</head>
<body>
	 <div class="box-score-board">
	     <div class="content">
	         <div class="box-left">
	         	  <div style="width:90%;height:100%;float:right;">
	         	  	   <div style="width:100%;height:45%;text-align:center">
	         	  	   	<p id="player1-name" style="color:#fff;font-size:90px;text-align:center;padding-top:20%">{$battle_info['player1_name']}</p>
	         	  	   </div>
	         	  	   <div style="width:90%;height:55%;text-align:center;">
	         	  	   	   <div style="font-family:'微软雅黑';margin-left:10px;color:#fff;font-size:160px;text-align:center;float:right;height:186px;width:141px;background:url(__ROOT__/public/static/index/image/scorebg.png);background-size: 100% 100%;padding-bottom:25px;"><p id="player1_score_2" >{$player1_score[1]}</p></div>
	         	  	   	   <div style="font-family:'微软雅黑';color:#fff;font-size:160px;text-align:center;float:right;height:186px;width:141px;background:url(__ROOT__/public/static/index/image/scorebg.png);background-size: 100% 100%;padding-bottom:25px;"><p id="player1_score_1" >{$player1_score[0]}</p></div>
	         	  	   </div>

	         	  </div>
	         </div>
	         <div class="box-center">
	         	    <div style="width:100%;height:35%;text-align:center">
	         	  	   	
	         	  	</div>

	         	  	 <div style="width:100%;height:60%;margin:40px auto;background:url(__ROOT__/public/static/index/image/bg_frame.png) no-repeat;background-size: 70% 70%;background-position:center top;"><div style="width:100%;height:70%;padding-top:60px;">
	         	  	   	   <p id="frame" style="color:#9deeff;font-size:41px;text-align:center;">总局数</p>
	         	  	   	   <p id="sum-frame" style="font-family:hzgb;color:#9deeff;font-size:38px;text-align:center;padding-top:22px;">{$battle_info['sum_frame']}</p></div>
	         	  	 </div>
	         </div>
	         <div class="box-right">
	         	   <div style="width:90%;height:100%;float:left;">
	         	  	   <div style="width:90%;height:45%;text-align:center;">
	         	  	   	  <p id="player2-name" style="color:#fff;font-size:90px;text-align:center;padding-top:20%">{$battle_info['player2_name']}</p>
	         	  	   </div>
	         	  	    <div style="width:90%;height:60%;margin:0px auto;text-align:center;">
	         	  	   	   <div style="font-family:'微软雅黑';color:#fff;font-size:160px;text-align:center;float:left;height:186px;width:141px;background:url(__ROOT__/public/static/index/image/scorebg.png);background-size: 100% 100%;padding-bottom:25px;"><p  id="player2_score_1">{$player2_score[0]}</p></div>
	         	  	   	   <div style="font-family:'微软雅黑';margin-left:10px;color:#fff;font-size:160px;text-align:center;float:left;height:186px;width:141px;background:url(__ROOT__/public/static/index/image/scorebg.png);background-size: 100% 100%;padding-bottom:25px;"><p  id="player2_score_2">{$player2_score[1]}</p></div>
	         	  	   </div>
	         	  </div>
	         </div>
	         <div style="clear:both">
	         	 
	         </div>
	     </div>
	     <div class="footer">
	     	 <p style="font-family:'微软雅黑';font-size:37px">{$battle_info['event_name']} <span id="event-stage" style="font-family:'微软雅黑';font-size:37px">{$battle_info['event_stage']}</span><p>
	     </div>
	     <input id="update-time" type="hidden" value="{$battle_info['update_time']}">
	 </div>
</body>
<script type="text/javascript">
    //更新记分板
    function updateScoreBoard(){
        var update_time   = $("#update-time").val();

    	var url = "{:Url('Index/updateScoreBoard',['battle_id'=>$battle_id])}"+"?update_time="+update_time+"&";

        $.ajax({  
            url: url,  
            dataType: "json",  
            async:true, 
            cache: false,  
            // error: function (XMLHttpRequest, textStatus, errorThrown) {  
            //     $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");  
            //     if (textStatus == "timeout") { // 请求超时  
            //         longPolling(); // 递归调用  
            //     } else { // 其他错误，如网络错误等  
            //         longPolling();  
            //     }  
            // },  
            success: function (data) {
                if(data.state == 2){
                    var url = "{:Url('Index/index')}"+"?battle_id="+data.battle_id;
                    window.location.href = url;
                }else if(data.state == 1){
                    console.log(data);
                    var player1_score = data.battle_info['player1_score'].toString();
                    var player2_score = data.battle_info['player2_score'].toString();

                    
                    $('#player1_score_2').text(player1_score < 10 ? player1_score : player1_score[1]);
                    $('#player1_score_1').text(player1_score < 10 ? 0 : player1_score[0]);
                    $('#player2_score_2').text(player2_score < 10 ? player2_score : player2_score[1]);
                    $('#player2_score_1').text(player2_score < 10 ? 0 : player2_score[0]);

                    $('#player1-name').text(data.battle_info['player1_name']);
                    $('#player2-name').text(data.battle_info['player2_name']);
                    $('#sum-frame').text(data.battle_info['sum_frame']);
                    $("#event-stage").text(data.battle_info['event_stage']);
                    $("#update-time").val(data.battle_info['update_time']);
                    updateScoreBoard();
                }else{
                	updateScoreBoard();
                }
                
            }  
        });  
    }
   
    window.onload=function(){ 
        updateScoreBoard();
    }
</script>
</html>